<template>
  <div>
    <div class="searchBar">
      <el-form label-width="100px">
      <div style="display:flex;">
        <el-form-item label="订单编号:">
          <el-input size="small" v-model="searchOrderNum"></el-input>
        </el-form-item>
        <el-form-item label="订单时间:">
          <el-date-picker
            v-model="searchTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small">
          </el-date-picker>
        </el-form-item>
        <!-- {{searchTimeRange}} -->
        <el-form-item label="订单状态:">
          <el-select v-model="searchOrderState" placeholder="请选择" size='small'>
            <el-option
              v-for="(item,index) in payStateOptions"
              :key="index"
              :label="item.label"
              :value="index">
            </el-option>
          </el-select>
          <!-- {{searchOrderState}} -->
        </el-form-item>
      </div>
      </el-form>
      <div style="margin:0 auto;width:250px;">
          <el-button type="primary" class="el-icon-search" size="medium" @click="handleSearch(1)">搜索</el-button>
          <el-button class="el-icon-delete" size="medium" style="margin:20px 0 0 10px;" @click="handleSearch(0)">清空</el-button>
      </div>
    </div>

    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="tableOption"
               @search-change="searchChange"
               @on-load="getDataList">
      <template slot-scope="scope" slot="refundSts">
        <el-tag v-if="scope.row.refundSts==1" type="warning">待审核</el-tag>
        <el-tag v-if="scope.row.refundSts==2" type="success">通过成功</el-tag>
        <el-tag v-if="scope.row.refundSts==3" type="danger">审核失败</el-tag>
      </template>

      <template slot="menu" slot-scope="scope">
        <el-button @click="showRefundInfo(scope.row)">查看详情</el-button>
      </template>



    </avue-crud>

    <el-dialog
      title="退款详情"
      :visible.sync="infoVisible"
      modal
      center
      :close-on-click-modal='true'
      :close-on-press-escape='true'
      :width='selectOrder.refundImg?"60%":"30%"'
      top='6vh'>
      <div  :style="selectOrder.refundImg?'height:68vh;over-flow:hidden;overflow:scroll;':''">
      <el-form>
        <el-form-item label="退款原因：">{{selectOrder.refundReason}}</el-form-item>
        <el-form-item label="退款金额：">{{selectOrder.refundAmount}}元</el-form-item>
        <el-form-item label="退款说明：" v-if="selectOrder.refundExplain">{{selectOrder.refundExplain}}</el-form-item>
        <el-form-item label="联系电话：" v-if="selectOrder.phone">{{selectOrder.phone}}</el-form-item>
        <div v-if="selectOrder.refundImg">退款凭证</div>
        <div style="width: 100%;display:flex;flex-wrap:wrap;margin:40px 0;">
          <div style="width:32%;margin:5px;" v-for="(item,index) in selectOrder.refundImg" :key='index'><img :src="item" alt=""></div>
        </div>
      </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">取 消</el-button>
        <el-button v-if="selectOrder.refundSts==1" @click="handleRefund(2)">不予通过</el-button>
        <el-button v-if="selectOrder.refundSts==1" type="primary" @click="handleRefund(1)">通过审核</el-button>
      </span>

    </el-dialog>
  </div>


</template>

<script>
import { tableOption } from '@/crud/order/refundOrder.js'
import AddOrUpdate from './orderInfo'
// import ConsignmentInfo from './consignment-info'
export default {
  data () {
    return {
      infoVisible: false,
      tableOption: tableOption,
      dataForm: {},
      dateRange: [],
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataListLoading: false,
      dataListSelections: [],
      consignmentInfoVisible: false,
      selectOrder: {},

      searchOrderState:'',
      searchOrderNum: '',
      searchTimeRange: [],


      payStateOptions:[{
        label:'退款待审核',
        value:{orderState:1, refundState:1,}
      },{
        label:'退款已完成',
        value:{orderState:1, refundState:2,}
      },{
        label:'退款失败',
        value:{orderState:1, refundState:3,}
      },]
    }
  },
  components: {
    AddOrUpdate,
    // ConsignmentInfo
  },
  activated () {
    this.getDataList(this.page)
  },
  methods: {
    // 获取数据列表
    getDataList (page, params) {
      page = (page === undefined ? this.page : page)
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/order/orderRefund/refundPage'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
            current: page.currentPage,
            size: page.pageSize,
            orderNumber: this.searchOrderNum,
            startTime: this.searchTimeRange.length!==0? this.dateTimeString(this.searchTimeRange[0]):'',
            endTime: this.searchTimeRange.length!==0? this.dateTimeString(this.searchTimeRange[1]):'',
          },this.searchOrderState!==''?this.payStateOptions[this.searchOrderState].value:{})
        )
      }).then((res) => {
        let data = res.data
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },

    showRefundInfo(refundOrder){
      this.infoVisible = true
      console.log(refundOrder)
      this.selectOrder = refundOrder
      this.selectOrder.refundImg = JSON.parse(refundOrder.refundImg)
    },

    // 每页数
    sizeChangeHandle (val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      this.getDataList(this.page)
    },
    // 当前页
    currentChangeHandle (val) {
      this.page.currentPage = val
      this.getDataList(this.page)
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    orderStatus () {
    },

    searchChange(params,done){
      console.log(params);
      done()
    },

    handleSearch(state){
      if (state==0) {
        this.searchOrderNum = ''
        this.searchOrderState = ''
        this.searchTimeRange = []
        this.getDataList()
      }else if (state == 1) {
        // console.log(this.searchTimeRange);
        // var params = Object.assign({
          // orderNumber: this.searchOrderNum,
        // })
        // },this.searchOrderState?this.payStateOptions[this.searchOrderState].value:{})
        // console.log(params);
        this.getDataList()
      }
    },

		//格式化日期时间
		dateTimeString(val){
      let date = new Date(val)
      // console.log(date);
			let D = [
			String(date.getFullYear()),
			date.getMonth()<9?'0'+(date.getMonth()+1):String(date.getMonth()+1),
			date.getDate()<10?'0'+date.getDate():String(date.getDate()),
			date.getHours()<10?'0'+date.getHours():String(date.getHours()),
			date.getMinutes()<10?'0'+date.getMinutes():String(date.getMinutes()),
			date.getSeconds()<10?'0'+date.getSeconds():String(date.getSeconds())
      ]
      // console.log(D.slice(0,3).join('-')+' '+D.slice(3).join(':'));
			return D.slice(0,3).join('-')+' '+D.slice(3).join(':')
		},

    // 通过/拒绝审核
    handleRefund (state) {
      console.log(state);
      this.$confirm((state==1?'确认通过此退款审核?':"确认拒绝此退款申请?"), '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/admin/apply/refund'),
          method:'post',
          params: this.$http.adornParams({
            orderNumber: this.selectOrder.orderNumber,
            orderState: state == 1?1 : 0,
            refundState: state == 1?2 : 3
          })
        }).then((res) =>{
          this.getDataList()
          this.infoVisible = false
          if (state == 1) {
            this.$message({
            type: 'success',
            message: '审核已通过，请等待汇款!'
            });
          }else if(state == 2){
            this.$message({
            type: 'warning',
            message: '审核不予通过!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  }
}
</script>
<style lang="scss">
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
